<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <div>
        <select onchange="fn1(this)">
            <option>--请选择省份</option>
        </select>

        <select onchange="fn2(this)">
            <option>--请选择城市</option>
        </select>

        <select>
            <option>--请选择地区</option>
        </select>

    </div>


    <script>
        
        var city = {};
        var select1 = document.getElementsByTagName("select")[0];
        var select2 = document.getElementsByTagName("select")[1];
        var select3 = document.getElementsByTagName("select")[2];
        function createCity(){
            var _ajax = new XMLHttpRequest();
            _ajax.open("GET","city.json",true);
            _ajax.send();
            _ajax.onreadystatechange = function(){
                if(_ajax.readyState == 4 && _ajax.status == 200){
                    // console.log(JSON.parse(_ajax.responseText));
                    city = JSON.parse(_ajax.responseText).city
                    console.log(city);
                    var option = "<option>--请选择省份--</option>"
                    city.forEach(item => {
                        option+="<option value="+item.name+">"+item.name+"</option>";
                    });
                    select1.innerHTML = option;
                    select2.disabled="disabled";
                    select3.disabled="disabled";
                }
                
                
            }
        }
        createCity();

        var s = [];

        function fn1(e){
            city.some(item=>{
                var option = "<option>--请选择城市--</option>";
                if(e.value == item.name){

                    s = item.city
                   
                    s.forEach(item=>{
                        option+="<option value="+item.name+">"+item.name+"</option>"
                    })
                    select2.disabled="";
                    select2.innerHTML = option
                    return true;
                }else{
                    select2.innerHTML = option;
                    select3.innerHTML = "<option>--请选择区域--</option>"
                    select2.disabled="disabled";
                    select3.disabled="disabled";
                }
            })

        }

        function fn2(e){
            s.some(item=>{
                var option = "<option>--请选择区域--</option>"
                if(e.value == item.name){
                    var area = item.area
                    
                    area.forEach(item =>{
                        option+= "<option>"+item+"</option>"
                    })
                    select3.disabled="";
                    select3.innerHTML = option;
                    return true;
                }else{
                    select3.innerHTML = option;
                    select3.disabled="disabled";
                }

            })
        }








    </script>




</body>
</html>